<template>
	<view class="content">
		
		<u-sticky >
			<u-icon name="search" size="48" class="stickClass" label="筛选" @click="popupSearchPanel"></u-icon>
		</u-sticky>
		<view v-for="item in inOutList" :class="item.inOutType==='IN'?'msgBox1':'msgBox2'">
			
			<u-row :gutter="15" custom-style="padding-top:8px">
				<u-col span="7" customStyle="padding-left:8px">
					<view class="reportFont">商品名称：{{item.goodName}}</view>
				</u-col>
				<u-col span="5">
					<view class="reportFont">商品编码：{{item.goodNo}}</view>
				</u-col>
			</u-row>
			
			<u-row :gutter="15" custom-style="padding-top:8px">
				<u-col span="7" customStyle="padding-left:8px">
					<view class="reportFont">进销：{{item.inOutTypeText}}</view>
				</u-col>
				<u-col span="5">
					<view class="reportFont">数量：{{item.amount}}</view>
				</u-col>
			</u-row>
			
			<u-row :gutter="15" custom-style="padding-top:8px">
				<u-col span="7" customStyle="padding-left:8px">
					<view class="reportFont">时间：{{item.createTime}}</view>
				</u-col>
				<u-col span="5">
					<view class="reportFont">上报人：{{item.chargerName}}</view>
				</u-col>
			</u-row>
		</view>
		
		<u-popup :show="popupMenuShow" mode="right" customStyle="width:300px;" @close="closePopup"   >
			<u--form 
				class="formFontSzie"
				labelPosition="left"
				customStyle="margin-top: 24px;"	
				labelWidth="80px"
				:model="queryParams"
				labelStyle="{'fontSize':'10px'}"
				labelAlign="center"
			>
				<u-form-item label=" 商品">
					<u-input placeholder="商品名称查询" v-model="queryParams.likeGoodName"></u-input>
				</u-form-item>
				<u-form-item label=" 编码">
					<u-input placeholder="商品编码查询" v-model="queryParams.likeGoodNo"></u-input>
				</u-form-item>
				<u-form-item label="开始日期">
					
					<u-search placeholder="开始日期" v-model="queryParams.chargerStartDate"  @click="toShowStartPicker" shape="square" :disabled="true"  searchIcon="calendar-fill" :showAction="false" ></u-search>
					<u-datetime-picker v-model="startPickerValue"  mode="date" :show="startCalendarShow" @close="startCalendarShow=false" @cancel="startCalendarShow=false" @confirm="startCalendarConfirm"></u-datetime-picker>
				</u-form-item>
				<u-form-item label="结束日期">
					<u-search placeholder="结束日期" v-model="queryParams.chargerEndDate"  @click="toShowEndPicker" shape="square" :disabled="true"  searchIcon="calendar-fill" :showAction="false" ></u-search>
					<u-datetime-picker v-model="endPickerValue"  mode="date" :show="endCalendarShow" @close="endCalendarShow=false" @cancel="endCalendarShow=false" @confirm="endCalendarConfirm"></u-datetime-picker>
				</u-form-item>
				
				<u-form-item label="进销类型">
					<u-search placeholder="进销类型查询" v-model="queryParams.inOutTypeName" @click="showInOutPicker" shape="square" :disabled="true" search-icon="car" :showAction="false" ></u-search>
					<u-picker :show="showInOutType" :columns="inOutTypeList" keyName="label"  @close="showInOutType=false" @cancel="showInOutType=false" @confirm="confirmInOutType"></u-picker>
				</u-form-item>
				<u-form-item>
					<u-button type="primary" text="查询" @click="execQuery"></u-button>
				</u-form-item>
				<u-form-item>
					<u-button type="warning" text="重置" @click="resetQuery"></u-button>
				</u-form-item>
				
			</u--form>
		</u-popup>
			
		<u-loadmore bg-color="rgb(240, 240, 240)" :status="loadStatus" @loadmore="loadInOutRecord"></u-loadmore>
	</view>
</template>

<script>
	import {pageListAllCheck} from '@/api/inoutrecord.js'
	import { formatDateTime } from '../../common/utils';
	export default{
		data() {
					return {
						
						pageSize:10,
						popupMenuShow:false,
						loadStatus: 'loadmore',
						startCalendarShow:false,
						endCalendarShow:false,
						dateRange:undefined,
						startPickerValue:formatDateTime(new Date(),"yyyy-MM-dd"),
						endPickerValue:formatDateTime(new Date(),"yyyy-MM-dd"),
						showInOutType:false,
						queryParams:{
							pageNum:1,
							likeGoodName:undefined,
							likeGoodNo:undefined,
							chargerStartDate:undefined,
							chargerEndDate:undefined,
							inOutTypeName:undefined,
							inOutType:undefined,
							userOnly:"TRUE"
						},
						inOutTypeList:[
							[
								{
									value:'IN',
									label:'入库'
								},
								{
									value:'OUT',
									label:'出库'
								},
							]
						],
						inOutList:[
							/* {
								goodName:"珍珠",
								amount:100,
								chargerName:'张三',
								inOutType:'IN',
								inOutTypeText:'入库',
								createTime:'2024-04-22 15:32:10',
								goodNo:'L12'
							},
							{
								goodName:"翡翠",
								amount:50,
								chargerName:'李四',
								inOutType:'OUT',
								inOutTypeText:'出库',
								createTime:'2024-04-10 15:32:10',
								goodNo:'L31'
							},
							{
								goodName:"珍珠",
								amount:30,
								chargerName:'王五',
								inOutType:'IN',
								inOutTypeText:'入库',
								createTime:'2024-04-22 15:32:10',
								goodNo:'L12'
							},
							{
								goodName:"珍珠",
								amount:100,
								chargerName:'赵六',
								inOutType:'IN',
								inOutTypeText:'入库',
								createTime:'2024-04-22 15:32:10',
								goodNo:'L12'
							},
							{
								goodName:"珍珠",
								amount:100,
								chargerName:'猪八',
								inOutType:'IN',
								inOutTypeText:'入库',
								createTime:'2024-04-22 15:32:10',
								goodNo:'L12'
							},
							{
								goodName:"珍珠",
								amount:60,
								chargerName:'小赵',
								inOutType:'OUT',
								inOutTypeText:'出库',
								createTime:'2024-04-22 15:32:10',
								goodNo:'L12'
							},
							{
								goodName:"珍珠",
								amount:100,
								chargerName:'张三',
								inOutType:'IN',
								inOutTypeText:'入库',
								createTime:'2024-04-22 15:32:10',
								goodNo:'L12'
							}, */
						]
					}
				},
				onLoad() {
					//this.addRandomData();
					this.loadInOutRecord();
				},
				
				onReachBottom() {
					if(this.loadStatus!=="nomore"){
						this.loadInOutRecord();
					}
					/* console.log("onReachBottom");
					this.loadStatus="nomore";
					console.log("nomore....");
					return;
					this.loadStatus = 'loading';
					// 模拟数据加载
					setTimeout(() => {
						this.addRandomData();
						this.loadStatus = 'loadmore';
					}, 1000) */
				},
				methods: {
					
					execQuery(){
						this.queryParams.pageNum=1;
						this.inOutList=[];
						this.loadInOutRecord();
						this.popupMenuShow=false;
					},
					resetQuery(){
						this.queryParams={
							likeGoodName:undefined,
							likeGoodNo:undefined,
							chargerStartDate:undefined,
							chargerEndDate:undefined,
							inOutTypeName:undefined,
							inOutType:undefined,
							userOnly:"TRUE"
						};
						
					},
					loadInOutRecord(){
						let that=this;
						this.loadStatus="loading";
						//let queryParams={"pageNum":this.pageNum,"pageSize":this.pageSize};
						pageListAllCheck(this.queryParams).then(res=>{
							that.toPutDataToList(res);
							
						});
					},
					toPutDataToList(res){
						
						if(res.rows && res.rows.length>0){
							for(let i=0;i<res.rows.length;i++){
								this.inOutList.push(res.rows[i]);
							}
							let dbTotal=res.total;
							let currentTotal=this.queryParams.pageNum*this.pageSize;
							if(currentTotal>=dbTotal){
								this.loadStatus="nomore";
								console.log(this.loadStatus);
							}else{
								this.queryParams.pageNum++;
								this.loadStatus="loadmore";
							}
						}else{
							this.loadStatus="nomore";
						}
					},
					addRandomData() {
						for(let i = 0; i < 10; i++) {
							let index = this.$u.random(0, this.list.length - 1);
							// 先转成字符串再转成对象，避免数组对象引用导致数据混乱
							let item = JSON.parse(JSON.stringify(this.list[index]))
							item.id = this.$u.guid();
							this.list.push(item);
						}
					},
					popupSearchPanel(){
						this.popupMenuShow=true;
					},
					closePopup(){
						this.popupMenuShow=false;
					},
					startCalendarConfirm(e){
						// console.log(e);
						
						let selectedDate=new Date(e.value);
						let selectedStr=formatDateTime(selectedDate,"yyyy-MM-dd");
						
						this.queryParams.chargerStartDate=selectedStr;
						this.startCalendarShow=false;
					},
					toShowStartPicker(){
						this.startCalendarShow=true;
						
					},
					toShowEndPicker(){
						this.endCalendarShow=true;
					},
					endCalendarConfirm(e){
						let selectedDate=new Date(e.value);
						let selectedStr=formatDateTime(selectedDate,"yyyy-MM-dd");
						this.queryParams.chargerEndDate=selectedStr;
						this.endCalendarShow=false;
					},
					showInOutPicker(){
						this.showInOutType=true;
					},
					confirmInOutType(e){
						this.showInOutType=false;
						let selected=e.indexs[0];
						let inOutType=this.inOutTypeList[0][selected];
						this.queryParams.inOutTypeName=inOutType.label;
						this.queryParams.inOutType=inOutType.value;
					}
						
					
				}
	}
</script>

<style>

</style>

<style lang="scss" scoped>
	.msgBox1{
		border-radius: 3% 3% 3% 3%;
		
		background-color: rgb(239,174,152);
		height: 85px;
		margin-top: 8px;
		margin-left: 8px;
		margin-right: 8px;
	}
	.msgBox2{
		border-radius: 3% 3% 3% 3%;
		margin-top: 8px;
		background-color: rgb(96,140,239);
		height: 85px;
		margin-top: 8px;
		margin-left: 8px;
		margin-right: 8px;
	}
	
	.reportFont{
		font-size: 13px;
		color: rgb(252, 252, 250);
	}
	.accountTitle{
		height: 130px;
		background-color: rgb(52,118,205);
	}
	.stickClass{
		float: right;
	}
	.formFontSzie{
		font-size: 8px;
	}
</style>